<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../mi/css/reset.css" />
    <style>
      .nav {
        width: 100%;
      }
      .nav .inner {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        flex: initial;
        text-align: center;

        /* 分配空白空间 */
        justify-content: space-evenly;
      }
      .inner a {
        display: block;
        /* flex-shrink:1;
            flex-grow: 1; */
        width: 16%;
        /* 每个a是父元素宽度的15% */

        text-decoration: none;

        color: black;

        margin-top: 5px;
      }
      a img {
        /*图片会缩小的关键 */
        width: 100%;
      }
      a span {
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <nav class="nav">
      <!-- 设置弹性容器 -->
      <div class="inner">
        <a href="#">
          <img src="../exercise/img/16/1.png" alt="" />
          <span>天猫</span>
        </a>
        <a href="#">
          <img src="../exercise/img/16/2.png" alt="" />
          <span>聚划算</span>
        </a>
        <a href="#">
          <img src="../exercise/img/16/3.png" alt="" />
          <span>天猫国际</span>
        </a>
        <a href="#">
          <img src="../exercise/img/16/4.png" alt="" />
          <span>外卖</span>
        </a>
        <a href="#">
          <img src="../exercise/img/16/5.png" alt="" />
          <span>天猫超市</span>
        </a>
      </div>

      <div class="inner">
        <a href="#">
          <img src="../exercise/img/16/6.png" alt="" />
          <span>充值中心</span>
        </a>
        <a href="#">
          <img src="../exercise/img/16/7.png" alt="" />
          <span>领金币</span>
        </a>
        <a href="#">
          <img src="../exercise/img/16/8.png" alt="" />
          <span>天猫进口</span>
        </a>
        <a href="#">
          <img src="../exercise/img/16/9.png" alt="" />
          <span>飞猪旅行</span>
        </a>
        <a href="#">
          <img src="../exercise/img/16/10.png" alt="" />
          <span>商品分类</span>
        </a>
      </div>
    </nav>
  </body>
</html>
